<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>人员信息</title>
    <link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/personInfo.css" rel="stylesheet">
</head>
<body>
<h1 class="title">
    模拟人员信息表示例
</h1>
<!--表格Dom代码-->
<div class="box">
    <div class="tool-bar">
        <h2 id="gridTitle">人员信息表</h2>
        <!--添加按钮代码-->
        <i class="fa fa-plus-circle" id="add" title="添加" aria-hidden="true"></i>
    </div>
    <!--表格显示代码-->
    <table id="myTable">
        <!--列头示例代码-->
        <thead>
        <tr id="table_head">
            <th name="name">姓名</th>
            <th name="age">年龄</th>
            <th name="position">职业</th>
            <th name="mobile">手机号</th>
            <th name="email">邮箱</th>
            <th name="option">操作</th>
        </tr>
        </thead>
        <!--表格内容代码-->
        <tbody>
        <tr id="row_1">
            <td name="name">张睿</td>
            <td name="age">30</td>
            <td name="position">数据库分析师</td>
            <td name="mobile">15200110301</td>
            <td name="email">rui.zhang@163.com</td>
            <td name="option">
                <i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
                <i class="fa fa-trash"  title="删除" aria-hidden="true"></i>
            </td>
        </tr>
        <tr id="row_2">
            <td name="name">李鑫</td>
            <td name="age">32</td>
            <td name="position">架构师</td>
            <td name="mobile">15200113211</td>
            <td name="email">xin.zhang@163.com</td>
            <td name="option">
                <i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
                <i class="fa fa-trash"  title="删除" aria-hidden="true"></i>
            </td>
        </tr>
        <tr id="row_3">
            <td name="name">王源</td>
            <td name="age">23</td>
            <td name="position">软件测试工程师</td>
            <td name="mobile">15200112311</td>
            <td name="email">yuan.zhang@163.com</td>
            <td name="option">
                <i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
                <i class="fa fa-trash"  title="删除" aria-hidden="true"></i>
            </td>
        </tr>
        <tr id="row_4">
            <td name="name">赵志娅</td>
            <td name="age">29</td>
            <td name="position">web前端工程师</td>
            <td name="mobile">15200112911</td>
            <td name="email">zhiya.zhang@163.com</td>
            <td name="option">
                <i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
                <i class="fa fa-trash"  title="删除" aria-hidden="true"></i>
            </td>
        </tr>
        <tr id="row_5">
            <td name="name">李小强</td>
            <td name="age">28</td>
            <td name="position">UI设计师</td>
            <td name="mobile">15200112811</td>
            <td name="email">xiaoqiang.zhang@163.com</td>
            <td name="option">
                <i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
                <i class="fa fa-trash"  title="删除" aria-hidden="true"></i>
            </td>
        </tr>
        <tr id="row_6">
            <td name="name">冯旭</td>
            <td name="age">26</td>
            <td name="position">运维工程师</td>
            <td name="mobile">15200112611</td>
            <td name="email">xu.zhang@163.com</td>
            <td name="option">
                <i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
                <i class="fa fa-trash"  title="删除" aria-hidden="true"></i>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--弹出窗口的Dom代码
注：
    .fade 用作隐藏界面的样式类
    .in 用作显示界面的样式类
    .red 增加红色的边框显示
-->
<div id="personDetail" class="alert fade ">
    <div class="alert-bg"></div>
    <div class="box alert-message">
        <div class="tool-bar alert-header">
            <h2 id="alertTitle">人员详细信息</h2>
            <!--关闭按钮的代码-->
            <i class="fa fa-times-circle" id="circle" title="关闭" aria-hidden="true"></i>
        </div>
        <!--form 表单 存储和回显界面信息页面代码-->
        <form id="myFrom">
            <div>
                <span>姓名：</span><input  id="edit_name"   name="name" placeholder="请输入姓名！">
            </div>
            <div>
                <span>年龄：</span><input  id="edit_age"  name="age"   placeholder="请输入年龄！">
            </div>
            <div>
                <span>职业：</span><input  id="edit_position"  name="position" placeholder="请输入职业！">
            </div>
            <div>
                <span>手机号：</span><input id="edit_mobile"  name="mobile"   placeholder="请输入手机号！">
            </div>
            <div>
                <span>邮箱：</span><input  id="edit_email"  name="email"  placeholder="请输入邮箱！">
            </div>
            <div class="button-group">
                <!--取消和关闭按钮-->
                <button type="reset" id="cancle">取消</button>
                <button type="submit" id="submit">确定</button>
            </div>
        </form>

    </div>
</div>


<script src="js/jquery-1.12.4.js"></script>
<script src="index.js"></script>
</body>
</html>